<template>
    <div id="drawresult">
        <!-- <div style="position: fixed;right: 10px;margin-top:10px;z-index:999;">
            <el-button @click="f_exportmap()">地图导出</el-button>
        </div> -->
        <div class="map" id="map"></div>
        <div class="m_footer">
            <div style="display: flex;justify-content: space-between;align-items: center;height: 38px;font-size: 14px;">
                <div style="display: flex;justify-content: flex-start;">
                    <div style="margin-right: 20px;">区划名称：{{ localname }}</div>
                    <div>区划编码：{{ localcode }}</div>
                </div>
                <div>
                    坐标：
                    {{ Number($store.curlon).toFixed(5) }}，
                    {{ Number($store.curlat).toFixed(5) }}
                    比例尺：
                    <span v-show="Number($store.scale) > 1">
                        1:{{ Number($store.scale).toFixed(0) * 1000 }}
                    </span>
                    <span v-show="Number($store.scale) < 1">
                        1:{{ Number($store.scale * 10).toFixed(0) * 100 }}
                    </span>
                </div>
                <div>建设单位：河南省统计局</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, onUnmounted } from "vue";
import $mapreq from "../../api/mapreq";
import { init, unloadMap, drawresultlayer, drawpcxqres, addPOINT } from '../../utils/mapjs/map';
import { dataStore } from "../../store/data";
import { useRouter } from 'vue-router';
const $router = useRouter();
const $store = dataStore();
const localname = ref(localStorage.getItem('qhinfo'));
const localcode = ref(localStorage.getItem('code'));
onMounted(() => {
    init();
    xzresult();
    pcxqresult();
    villageresult();
    villagepoint();
});
function f_exportmap() {
    $router.push({
        name: 'expmap'
    })
}
onUnmounted(() => {
    unloadMap();
})
function xzresult() {
    $mapreq.getxzResult().then(res => {
        if (res.code == 200) {
            drawresultlayer(res.data.name, res.data.geom, res.data.gid);
        }
    });
}
function pcxqresult() {
    $mapreq.getPCXQResult().then(res => {
        if (res.code == 200) {
            drawpcxqres(res.data);
        }
    });
}
function villageresult() {
    $mapreq.getVillageResult().then(res => {

    });
}
function villagepoint() {
    $mapreq.getVillagePoint().then(res => {
        res.data.forEach((item, index) => {
            addPOINT(item.name, item.code, item.geom, 16, 'red', 18, false);
        });

    });
}
</script>

<style lang="less">
#drawresult {
    .m_footer {
        position: fixed;
        z-index: 99999;
        bottom: 0;
        color: white;
        background-color: rgba(0, 0, 0, .8);
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }

    height: 100%;

    #map {
        height: 100%;

        .ol-overlaycontainer-stopevent {
            display: none;
        }

        .ol-zoom-out {
            display: none;
        }

        .ol-zoom-in {
            display: none;
        }
    }
}
</style>
